const path  = require('path');
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve:{
      extensions:[".js",".ts"]
    },
    module:{
        rules:[
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets:['@babel/preset-env', '@babel/preset-typescript']
                  }
                }

            },
            {
                test: [/\.css$/, /\.less$/],
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                          modules: false
                        }
                    },
                    {
                      loader: 'less-loader'
                    }
                ]
              },
              {
                test: /\.(png|jpe?g|gif|svg)$/,
                loader: 'url-loader',
                options: {
                  limit: 10000
                }
              }

        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        })
      ],

      // 配置开发服务器
      devServer:{
        host: 'localhost',
        port: 8888,
      }
}